<template>
    <div class="chanAddress">
        <van-nav-bar
            :title="title"
            left-text=""
            right-text="保存"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <div class="wrapper">
            <van-cell-group inset>
                <van-field
                    v-model="addressData.area_name"
                    label="所在城市"
                    placeholder=""
                    @click="showAreaBox"
                    readonly
                />
                <van-field v-model="addressData.desc" label="小区/大厦/学校" placeholder="" />
                <van-field v-model="addressData.area" label="楼号-门牌号" placeholder="" />
                <van-field v-model="addressData.name" label="收货人" placeholder="" />
                <van-field v-model="addressData.phone" label="联系电话" placeholder="" />
                <van-cell center title="设为默认地址">
                    <template #right-icon>
                        <van-switch v-model="addressData.isDefault" size="24" />
                    </template>
                </van-cell>
            </van-cell-group>
            <div class="del_btn">
                <van-button
                    type="primary"
                    size="large"
                    color="linear-gradient(to right, #ff6034, #ee0a24)"
                    round
                    @click="delHandler"
                    v-show="delTF"
                >
                    删除
                </van-button>
            </div>
        </div>
        <van-popup v-model:show="cityShow" position="bottom" :style="{ height: '40%' }" round>
            <template #default>
                <div class="area_box">
                    <van-area
                        title="所在城市"
                        :area-list="areaList"
                        :columns-placeholder="['请选择', '请选择', '请选择']"
                        cancel-button-text=" "
                        @change="areaHandler"
                        @confirm="getArea"
                    />
                </div>
            </template>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, reactive, toRef } from 'vue';
import { requestDel, requestGetNT, requestPost, requestPut } from '@/utils/Request';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import { areaList } from '@vant/area-data';
import { Toast } from 'vant';
const router = new useRouter();
const route = new useRoute();
const store = useStore();
const token = store.state.user.token;
const fromPath = route.query.redirct;
const chosenAddrId = store.state.address.chosenAddrId;
const address = store.state.address.addressList.find(ele => ele.id == chosenAddrId);

const title = address ? '编辑地址' : '新建地址';
let delTF = address ? true : false;
let cityShow = ref(false);
let areaNameList = {
    province: '',
    city: '',
    area: '',
};
console.log(address);
let addressData = reactive({
    area_name: '',
    desc: '',
    area: '',
    name: '',
    phone: '',
    isDefault: false,
});
if (address) {
    addressData.area_name = address.area_name;
    addressData.desc = address.desc;
    addressData.area = address.area;
    addressData.name = address.name;
    addressData.phone = address.phone;
    addressData.isDefault = Boolean(+address.default_set);
}

const delHandler = async () => {
    console.log(address.id);
    let res = await requestDel(`/address/${address.id}`, token);
    router.push(`/address?redirct=${fromPath}`);
};

const onClickLeft = () => {
    router.push(`/address?redirct=${fromPath}`);
};
const onClickRight = async () => {
    if (!address) {
        const res = await requestPost('/address', token, {
            ...addressData,
            password: 'abc123456',
            post_code: '100000',
        });
        router.push(`/address?redirct=${fromPath}`);
    } else {
        let data = {
            area: addressData.area,
            area_name: addressData.area_name,
            desc: addressData.desc,
            name: addressData.name,
            phone: addressData.phone,
            post_code: addressData.post_code,
            status: addressData.status,
        };
        const res = await requestPut(`/address/${address.id}`, token, data);
        const res_d = await requestPost(`/setDefault/${address.id}`, token, {});
        router.push(`/address?redirct=${fromPath}`);
    }
};

const showAreaBox = async () => {
    cityShow.value = true;
};

const areaHandler = (value, colNum) => {
    try {
        areaNameList.province = value[0].name;
        areaNameList.city = value[1].name;
        areaNameList.area = value[2].name;
    } catch {}
};

const getArea = () => {
    if (areaNameList.province && areaNameList.city && areaNameList.area) {
        addressData.area_name = `${areaNameList.province} ${areaNameList.city} ${areaNameList.area}`;
        cityShow.value = false;
    } else if (!areaNameList.province) {
        Toast('请选择省份');
    } else if (!areaNameList.city) {
        Toast('请选择城市');
    } else {
        Toast('请选择区县');
    }
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    padding-top: 0.12rem;
    top: 0.44rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f1f1;
    overflow-y: scroll;
    .del_btn {
        margin: 0.3rem auto 0;
        height: auto;
        width: 3rem;
    }
}
</style>
